<template>
  <div  >
    <el-page-header
      :content="$t('menu.M_1040000200')"
      @back="$router.back()"
    />
    </el-header>
    <el-card
       
      shadow="never"
      :body-style="{padding: '0px'}"
      :page-size="pageSize"
      :total="totalPage"
      :current-page="pageIndex"
      @current-change="currentChangeHandle"
    >
      <el-form class="search-box" inline size="small" @submit.prevent.native>
        <el-form-item>
          <el-input
            v-model.trim="dataForm.devSn"
            :placeholder="$t('device.sn')"
            clearable
            maxlength="32"
            style="width: 255px;margin-bottom: 5px"
            @keyup.enter.native="search()"
            @clear="search"
            @blur="() => dataForm.devSn = dataForm.devSn.trim()"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="p-1.5" @click="search()">
            <svg-icon icon-class="search" class="text-lg" />
          </el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="dataListLoading"
        :data="dataList"
      >

        <el-table-column
          prop="modelCode"
          :label="$t('device.modelCode')"
          header-align="center"
          align="center"
        />
        <el-table-column prop="devSn" :label="$t('device.sn')" header-align="center" align="center" />
        <el-table-column
          prop="operatorName"
          :label="$t('device.operatorName')"
          header-align="center"
          align="center"
        />
        <el-table-column prop="isOnline" :label="$t('device.status')" header-align="center" align="center">
          <template v-slot="scope">
            <el-tag v-if="scope.row.isOnline == 1" size="small" type="success">
              {{ $t('device.online') }}
            </el-tag>
            <el-tag v-if="scope.row.isOnline == 0" size="small" type="info">
              {{ $t('device.offline') }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="activeTime" :label="$t('device.activeTime')" header-align="center" align="center">
          <template v-slot="scope">
            <div :title="timeFilter(scope.row.activeTime)">
              {{ dateFilter( scope.row.activeTime ) }}
              {{ scope.row.activeTime?'':'-' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="isAuth('10400002.MANAGE')"
          header-align="center"
          align="center"
          :label="$t('common.operate')"
        >
          <template v-slot="scope">

            <el-button type="text" :disabled="scope.row.noSignSwitch===1" @click="switchHandler(scope.row.devSn)">
              {{ $t('black_list.no_sign_switch') }}
            </el-button>

          </template>
        </el-table-column>
      </el-table>
    </el-card>

  </div>
</template>
<script>
import { pageMixins } from '@/mixins/pagination-mixins'
import { formatDate } from '@/utils/formatDate'
import { getDeviceBlacklistList, switchNoSign } from '@/api/device'
import { timeFilter, dateFilter } from '@/filters/index'
import { isAuth } from '@/utils'

export default {
  name: 'Blacklist',
  components: {},
  mixins: [pageMixins],
  data() {
    return {
      dataForm: {
        devSn: ''
      },
      paginationShow: true,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataList: []
    }
  },
  computed: {
    colHeight() {
      return this.$store.state.common.documentClientHeight
    }

  },
  mounted() {
    this.getDeviceList()
  },
  methods: {
    isAuth,
    timeFilter,
    dateFilter,
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDeviceList()
    },
    getDeviceList() {
      this.dataListLoading = true
      getDeviceBlacklistList(Object.assign({
        pageNo: this.pageIndex,
        pageSize: this.pageSize
      }, this.dataForm)).then(data => {
        console.log(data)
        this.dataList = data.data
        this.totalPage = data.rows
        this.dataListLoading = false
      }).catch(e => {
        console.log(`err:${JSON.stringify(e)}`)
        this.dataListLoading = false
      })
    },
    search() {
      this.pageIndex = 1
      this.getDeviceList()
    },
    formatDate(timeStamp) {
      if (timeStamp !== undefined) {
        return formatDate(timeStamp, 'YYYY-MM-DD HH:mm:ss')
      }
    },
    switchHandler(devSn) {
      this.$confirm(
        this.$t('black_list.switch_no_sign_confirm'),
        this.$t('common.tip'),
        {
          confirmButtonText: this.$t('common.confirm'),
          cancelButtonText: this.$t('common.cancel'),
          type: 'warning'
        }
      ).then(() => {
        switchNoSign(devSn).then(data => {
          this.$message({
            message: this.$t('black_list.switch_success'),
            type: 'success'
          })
          this.getDeviceList()
        }).catch(this.$confirmError)
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.device-online {
  color: #059669;
}

.device-offline {
  color: #d97706;
}

.disable-icon:hover {
  color: rgb(255, 27, 12);
}

.terminal-manage {
  margin-top: 15px;
}

.same {
  padding: 0;
  text-align: center;
  margin: 0 auto;
  height: 47px;
  vertical-align: middle;
  font-size: 0px;
  width: 195px;
}

.leftPart {
  // border-right: 1px solid $--color-primary-text;
  overflow-y: auto;

  .el-card {
    text-align: center;
    width: 92%;
    margin: 0 0 10px;
    padding: 5px 0;
    box-shadow: none;
    cursor: pointer;
    // &:hover {
    //  transform: scale(1.1);
    //   box-shadow: 0 2px 12px 0 #0000001a;
    //   color: $--color-primary;
    // }
  }
}
</style>
